<template>
    <div class="user-main">
        <div class="user-top">
            <div class="user-top-main">
                <div class="main-search">
                    <el-input 
                        v-model="search" 
                        placeholder="请输入内容"></el-input>
                    <el-button 
                        type="info" 
                        plain 
                        @click="this.getList()">
                            搜索
                    </el-button>
                </div>
                <el-button 
                    type="success" 
                    plain 
                    @click="dialogVisible = true"
                    class="add">
                        添加
                </el-button>
            </div>
        </div>
        <div class="user-context">
            <el-table
                    :data="items"
                    style="width: 100%"
                    stripe="true">
                    <el-table-column
                        prop="u_id"
                        label="用户ID"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="nickname"
                        label="用户昵称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="用户名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="password"
                        label="密码"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="手机号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="register_time"
                        label="注册时间"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="role_name"
                        label="身份"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="sku_name"
                        label="标签"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址"
                        width="180">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </el-table-column>
                </el-table>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request.js';
import axios from 'axios';
import setHeader from '@/api/tools/setHeaders.js'

export default {
    data(){
        return{
            items:[],
            search:null
        }
    },
    methods:{
        getList(){
            let headers = setHeader();
            request.post("/api/system/userList",this.search,{headers:headers}).then(res=>{
                let temp = res.data
                temp.forEach(element => {
                    element.register_time = new Date(element.register_time).getFullYear() + "-" + new Date(element.register_time).getMonth() + "-" + new Date(element.register_time).getDate()
                });
                this.items = temp
                console.log(res)
            })
        }
    },
    mounted() {
        this.getList();
    },
}
</script>

<style lang="scss" scoped>
.user-main{
    background-color: white;
    width: 1600px;
    min-height: 400px;
    margin-left: 20px;
    .user-top{
        height: 80px;
        border-bottom: 1px solid rgb(197, 197, 197);
        .user-top-main{
            display: flex;
            align-items: center;
            height: 100%;
                        .main-search{
                width: 400px;
                display: flex;
                padding-left: 20px;
            }
        }
    }
    .add{
        margin-left: 20px;
        width: 100px
    }
}
</style>